<template>
  <div class="entry">
    <div class="entry-step" v-show="step === 1">
      <ul class="entry-list">
        <li>
          <p class="entry-list-tips">请选择投保方案</p>
        </li>
        <li v-for="(item,index) in productList" :key="index">
          <p @click="changeProduct(item,index)">{{item.productName}}
            <img class="check-img" src="./../../../assets/images/checked.png" v-show="insurance.productCode === item.productCode"/>
          </p>
          <div class="box" v-show="index === activeName">
            <van-list v-show="index === activeName">
              <van-cell
                v-for="cell in productDetails"
                :key="cell.title"
                :title="cell.title"
                :value="cell.amount"
              />
            </van-list>
          </div>
        </li>
      </ul>
      <van-button type="primary" class="sign-form-input-sbtn" @click="next()">下一步</van-button>
    </div>
    <div class="entry-step" v-show="step === 2">
      <van-cell-group class="entry-form">
        <van-cell class="entry-list-tips" title="填写被保人信息"/>
        <van-field v-model="insurance.appntName" label="被保人姓名" placeholder="请输入被保人姓名" @blur="validator(insurance.appntName,'name')"/>
        <!-- <van-cell title="被保人性别" is-link :value="insurance.sex"  @click="toggleShow(1)"/> -->
        <van-cell title="证件类型" is-link class="choose-cell" :value="appntIdType"  @click="toggleShow(2)"/>
        <van-field v-model="insurance.appntIdNo" label="证件号码" placeholder="请输入证件号码" @blur="validator(insurance.appntIdNo,'idCard')"/>
        <van-field v-model="insurance.appntMobile" label="手机号码" placeholder="请输入手机号码" @blur="validator(insurance.appntMobile,'phone')"/>
        <van-field v-model="insurance.appntEmail" label="电子邮箱" placeholder="请输入电子邮箱" @blur="validator(insurance.appntEmail,'email')"/>
        <van-cell title="起保时间" is-link class="choose-cell" :value="insurance.insurStartDate"  @click="toggleShow(3)"/>
        <van-cell title="终保时间" :value="insurance.insurEndDate"/>
        <van-actionsheet
          v-model="show"
          :actions="showList"
          @select="onSelect"
        />
        <van-popup v-model="showDate" position="bottom" :close-on-click-overlay="false">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            :min-date="minDate"
            @confirm="sureTime()"
            @cancel="showDate = !showDate"
          />
        </van-popup>
      </van-cell-group>
      <van-button type="primary" class="last-step" @click="last()">上一步</van-button>
      <van-button type="primary" class="next-step" @click="next()">下一步</van-button>
    </div>
    <div class="entry-step" v-show="step === 3">
      <van-panel title="确认被保人信息">
        <van-cell-group>
          <van-cell title="投保方案" :value="insuranceName" />
          <van-cell title="保费" :value="premium" />
          <van-cell title="被保人姓名" :value="insurance.appntName" />
          <!-- <van-cell title="被保人性别" :value="insurance.sex" /> -->
          <van-cell title="证件类型" value="身份证" />
          <van-cell title="证件号码" :value="insurance.appntIdNo" />
          <van-cell title="手机号码" :value="insurance.appntMobile" />
          <van-cell title="电子邮箱" :value="insurance.appntEmail" />
          <van-cell title="投保开始时间" :value="insurance.insurStartDate" />
          <van-cell title="投保截至时间" :value="insurance.insurEndDate" />
        </van-cell-group>
      </van-panel>
      <van-button type="primary" class="sign-form-input-sbtn" @click="next()">提交</van-button>
      <van-dialog
        title= "提示"
        v-model="showDialog"
        :before-close="beforeClose"
      >
        <p>订单提交成功，请联系工作人员进行订单回款操作，谢谢！</p>
      </van-dialog>
    </div>
  </div>
</template>
<script>
import { getProductList, getProductById, submitData } from './../../../api/index.js'
export default {
  name: 'sun-insurance-entry',
  data () {
    return {
      step: 1,
      insurance: {
        appntName: '',
        sex: '',
        appntIdType: '',
        appntIdNo: '',
        appntMobile: '',
        appntEmail: '',
        insurStartDate: '',
        insurEndDate: '',
        productCode: ''
      },
      appntIdType: '',
      show: false,
      showDate: false,
      checked: false,
      showList: [],
      productList: [],
      showTab: '',
      liConHeight: 50,
      sexList: [{
        name: '男'
      }, {
        name: '女'
      }],
      idTypes: [{name: '身份证', val: 10}],
      activeName: '',
      productDetails: [],
      minDate: new Date(),
      currentDate: new Date(),
      insuranceName: '',
      validity: 0,
      premium: 0,
      showDialog: false
    }
  },
  created () {
    this.getProductList()
  },
  methods: {

    onSelect (item) {
      this.show = false
      if (this.showTab === 1) {
        this.insurance.sex = item.name
      } else if (this.showTab === 2) {
        this.insurance.appntIdType = item.val
        this.appntIdType = item.name
      }
    },
    toggleShow (tab) {
      this.showTab = tab
      this.showList = []
      if (tab === 1) {
        this.show = true
        this.showDate = false
        this.showList = JSON.parse(JSON.stringify(this.sexList))
      } else if (tab === 2) {
        this.show = true
        this.showDate = false
        this.showList = JSON.parse(JSON.stringify(this.idTypes))
      } else if (tab === 3) {
        this.show = false
        this.showDate = true
      }
    },
    getProductList () {
      getProductList().then(res => {
        this.productList = res.data.data
        this.activeName = this.productList[0].productCode
      })
    },
    changeProduct (item, index) {
      this.insuranceName = item.productName
      if (this.activeName === index) {
        this.activeName = null
      } else {
        this.checked = true
        this.activeName = index
        this.insurance.productCode = item.productCode
        const params = {productCode: item.productCode, pageSize: 200, pageNo: 1}
        getProductById(params).then(res => {
          let list = res.data.data
          for (let i = 0, j = list.length; i < j; i++) {
            list[i].amount = list[i].amount + '万'
            list[i].checked = false
          }
          this.premium = list[0].premium
          this.productDetails = list
        })
      }
    },
    sureTime () {
      if (this.currentDate.toDateString() === new Date().toDateString()) {
        this.insurance.insurStartDate = this.dealDateString(new Date())
        this.insurance.insurEndDate = this.getDay(new Date(), this.validity)
      } else {
        this.insurance.insurStartDate = this.dealDateString(this.currentDate)
        // this.insurance.insurStartDate = this.currentDate
        this.insurance.insurEndDate = this.getDay(this.currentDate, this.validity)
      }
      this.showDate = false
    },
    /**
    * @func
    * @desc 处理日期对象
    * @param {Date} date
    */
    dealDateString (now) {
      let date = new Date(now.getTime())
      const year = date.getFullYear()
      const month = this.appendzero(date.getMonth() + 1)
      const day = this.appendzero(date.getDate())
      let hour = ''
      let minute = ''
      let second = ''
      if (now.toDateString() === new Date().toDateString()) {
        hour = this.appendzero(date.getHours())
        minute = this.appendzero(date.getMinutes())
        second = this.appendzero(date.getSeconds())
      } else {
        hour = '00'
        minute = '00'
        second = '00'
      }
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    },
    appendzero (obj) {
      if (obj < 10) {
        return '0' + '' + obj
      } else {
        return obj
      }
    },
    getDay (now, differday) {
      let date = ''
      let year = ''
      let month = ''
      let day = ''
      let hour = ''
      let minute = ''
      let second = ''
      if (now.toDateString() === new Date().toDateString()) {
        date = new Date(now.getTime() + differday * 24 * 3600 * 1000)
        year = date.getFullYear()
        month = this.appendzero(date.getMonth() + 1)
        day = this.appendzero(date.getDate())
        hour = this.appendzero(date.getHours())
        minute = this.appendzero(date.getMinutes())
        second = this.appendzero(date.getSeconds())
      } else {
        date = new Date(now.getTime() + (differday - 1) * 24 * 3600 * 1000)
        year = date.getFullYear()
        month = this.appendzero(date.getMonth() + 1)
        day = this.appendzero(date.getDate())
        hour = '23'
        minute = '59'
        second = '59'
      }
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    },
    last () {
      this.step = this.step - 1
    },
    next () {
      if (this.step === 1) {
        if (this.insurance.productCode) {
          this.step = 2
          const startIndex = this.insuranceName.indexOf('(') + 1
          const endIndex = this.insuranceName.indexOf('天')
          this.validity = this.insuranceName.substring(startIndex, endIndex)
        } else {
          this.$toast.fail('请选择投保方案')
        }
      } else if (this.step === 2) {
        if (this.insurance.appntEmail && this.insurance.appntIdType && this.insurance.appntName && this.insurance.appntIdNo && this.insurance.appntMobile && this.insurance.insurStartDate && this.insurance.insurEndDate && this.insurance.productCode) {
          const flag4 = this.validator(this.insurance.appntName, 'name')
          const flag1 = this.validator(this.insurance.appntEmail, 'email')
          const flag2 = this.validator(this.insurance.appntIdNo, 'idCard')
          const flag3 = this.validator(this.insurance.appntMobile, 'phone')
          if (flag1 && flag2 && flag3 && flag4) {
            this.step = 3
          }
        } else {
          this.$toast.fail('存在漏填项')
        }
      } else if (this.step === 3) {
        submitData(this.insurance).then(res => {
          if (res.data.code === 200) {
            this.showDialog = true
          } else {
            this.$toast.fail(res.data.msg)
          }
        })
      }
    },
    validator (data, type) {
      let flag = true
      if (type === 'idCard') {
        const isIDCard1 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
        // 18位数身份证验证正则表达式：
        const isIDCard2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
        if (!isIDCard1.test(data) && !isIDCard2.test(data)) {
          this.$toast.fail('身份证格式有误')
          flag = false
        }
      } else if (type === 'phone') {
        const phone = /^$|^((13[0-9])|(14[5-9])|(15[0-3,5-9])|166|(17[0-8])|(18[0-9])|(19[8,9]))\d{8}$/
        if (!phone.test(data)) {
          this.$toast.fail('手机格式有误')
          flag = false
        }
      } else if (type === 'email') {
        const szReg = /^([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!szReg.test(data)) {
          this.$toast.fail('邮箱格式有误')
          flag = false
        }
      } else if (type === 'name') {
        if (data.length > 12) {
          this.$toast.fail('姓名长度应在12个字符以内')
          flag = false
        }
      }
      return flag
    },
    beforeClose (action, done) {
      if (action === 'confirm') {
        // setTimeout(done, 1000);
        this.$router.push({name: 'orderManage'})
      } else {
        this.$router.push({name: 'orderManage'})
      }
    }
  }
}
</script>

<style lang="stylus">
.entry{
  position fixed
  padding 50px 30px 30px 34px
  width calc( 100% - 65px )
  height calc( 100% - 400px )
  // .choose-cell{
  //   .van-cell__value{
  //     color #333
  //   }
  // }
  .van-picker{
    font-size 36px
    .van-picker__toolbar{
      height 90px
      line-height 90px
    }
  }
  .van-picker__columns{
    height 360px !important
    .van-picker-column{
      font-size 36px
      height 360px !important
    }
  }
  .entry-step{
    height 100%
    overflow auto
  }
  .van-panel__header{
    .van-cell__title{
      font-size:42px;
      font-family:PingFang-SC-Bold;
      font-weight:bold;
      color:rgba(51,51,51,1);
      width: 360px
    }
  }
  .entry-list-tips{
    font-size:48px !important;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);
    .van-cell__title{
      font-size:42px;
      font-family:PingFang-SC-Bold;
      font-weight:bold;
      color:rgba(51,51,51,1);
      width: 360px
    }
  }
  .entry-list{
    background #ffffff
    border-radius 24px
    font-size: 36px;
    font-weight: 500;
    font-family: PingFang-SC-Medium;
    color: rgba(51,51,51,1);
    text-align: left;
    overflow auto
    li{
      border-bottom 1px solid rgba(216,216,216,1);
      &:last-child{
        border-bottom none
      }
      p{
        height 96px
        line-height 96px
        font-size 42px
        padding 18px
        margin-block-start: 0px;
        margin-block-end: 0px;
        position relative
        .check-img{
          position absolute
          right 12px
          top 42px
          vertical-align middle
          width 42px
          text-align right
        }
      }
      .van-list{
        .van-cell{
          font-size:36px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(153,153,153,1);
          background:rgba(239,239,239,1);
          .van-cell__title{
            width 560px
            max-width 560px
            color #999
          }
          .van-cell__value{
            color #333
          }
        }
      }
    }
  }
  .van-collapse-item__title{
    .van-cell__title{
      font-size 48px
      width 520px
      max-width 520px
    }
  }
  .van-collapse-item__content{
    font-size:36px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
    background:rgba(239,239,239,1);
    .van-list{
      .van-cell{
        font-size:36px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
        background:rgba(239,239,239,1);
        .van-cell__title{
          width 560px
          max-width 560px
          color #999
        }
        .van-cell__value{
          color #333
        }
      }
    }
  }
  .van-icon{
    color #999
  }
  .van-actionsheet{
    bottom 120px !important
  }
  .van-cell__right-icon{
    line-height 96px
  }
  .van-actionsheet__item{
    height 108px
    line-height 108px
    text-align center
    font-size 42px
    &:hover{
      background #ccc
      color #4bc960
    }
    &:active{
      background #ccc
      color #4bc960
    }
  }
  .sign-form-input-sbtn{
    position fixed
    bottom 150px
    left 30px
    width calc( 100% - 65px )
    height:100px;
    background:rgba(17,177,144,1);
    border-radius:10px;
    font-size 48px
  }
  .next-step{
    position fixed
    bottom 150px
    right 30px
    width 40%
    height:100px;
    background:rgba(17,177,144,1);
    border-radius:10px;
    font-size 48px
  }
  .last-step{
    position fixed
    bottom 150px
    left 30px
    width:40%;
    height:100px;
    background: white;
    border-radius:10px;
    border 2px solid rgba(17,177,144,1)
    color rgba(17,177,144,1)
    margin-top 42px
    font-size 42px
  }
  .entry-form{
    border-radius 32px
    .entry-form-select{
      color #999
    }
  }
  .van-field{
    height 120px
    line-height 120px
  }
  .van-cell {
    height 120px
    line-height 120px
  }
  .van-cell__title{
    text-align left
    width 200px
    font-size 36px
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  .van-cell__value{
    font-size 36px
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
  }
  .van-field__control{
    text-align right
  }
}
</style>
